<template>
	<view class="mine-wrapper">
		<top-nav title="个人中心"></top-nav>
		<view class="top">
			<view class="avatar">
				<view class="avatar-content">
					B
					<!-- <u-image width="100%" height="100%" :src="avatar"></u-image>	 -->
				</view>
			</view>
			<view class="name">{{userInfo.name}}</view>
			<view class="id">ID：{{userInfo.invite_code}}</view>
		</view>
		<view class="input">
			<view class="list">
				<view class="label">姓名</view>
				<view class="input-content">
					<u-input v-model="userInfo.name" type="text" :custom-style="inputClass" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="list">
				<view class="label">性别</view>
				<view class="input-content" @click="show=true">
					<view class="input-info">{{userInfo.sex==1?'男':'女'}}</view>
				</view>
			</view>
			<view class="list">
				<view class="label">地区</view>
				<view class="input-content">
					<u-input v-model="userInfo.region" type="text" :custom-style="inputClass" placeholder="请输入地区" />
				</view>
			</view>
			<view class="list">
				<view class="label">联系方式</view>
				<view class="input-content">
					<u-input v-model="userInfo.tel" type="number" :custom-style="inputClass" placeholder="请输入联系方式" />
				</view>
			</view>
			<view class="list">
				<view class="label">eamil</view>
				<view class="input-content">
					<u-input v-model="userInfo.email" type="text" :custom-style="inputClass" placeholder="未设置" />
				</view>
			</view>
			<view class="list">
				<view class="label">收款地址</view>
				<view class="input-content">
					<u-input v-model="userInfo.destination" type="number" :custom-style="inputClass" placeholder="请输入收款地址" />
				</view>
			</view>
		</view>
		<view class="comfirm-btn" @click="saveFun">保存</view>
		<u-toast ref="uToast" />
		<u-action-sheet :list="list" :cancel-btn="false" @click="click" v-model="show"></u-action-sheet>
	</view>
</template>

<script>
	import topNav from '../../components/top-nav/top-vue.vue';
	export default{
		components:{
			topNav:topNav
		},
		mounted() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getUserInfo();
		},
		methods:{
			getUserInfo(){
				this.$u.post('/api/getEditUserInfo', {account_id:uni.getStorageSync('account_id')}).then(res=>{
					if(res.code==200){
						this.userInfo = Object.assign({},this.userInfo,res.data);
						console.log(this.userInfo,res.data)
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			gotoShare(){
				uni.navigateTo({
				    url: '/pages/share/share'
				});
			},
			click(index){
				this.userInfo.sex = this.list[index].value
			},
			saveFun(){
				const params = Object.assign({},this.userInfo,{account_id:uni.getStorageSync('account_id')})
				this.$u.post('/api/editUserInfo', params).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							title: res.message,
							type: 'success',
						})
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			}
		},
		data(){
			return {
				userInfo:{},
				show: false,
				gender:'男',
				list: [
					{
						text: '男',
						value:1,
						color: 'blue',
					},
					{
						text: '女',
						value:2,
						color: 'blue',
					}
				],
				inputClass:{
					color:'#ffffff',
					fontSize: '36rpx'
				},
				avatar:'',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-wrapper{
		padding:0 20*2rpx 140rpx;
		height:100%;
		box-sizing: border-box;
		.top-nav-content{
			padding:20*2rpx;
			.name{
				font-size:24*2rpx;
			}
		}
		.top{
			position: relative;
			padding-top:40*2rpx;
			.avatar{
				width:78*2rpx;
				height:78*2rpx;
				box-shadow: 0px 0px 4px 0px rgba(141, 180, 255, 0.5);
				background: linear-gradient(225deg, rgba(255, 220, 94, 1), rgba(101, 255, 93, 1), rgba(255, 220, 94, 1));
				padding: 4rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin:0 auto 20*2rpx;
				.avatar-content{
					width: 100%;
					height:100%;
					overflow: hidden;
					border-radius: 50%;
					background-color: #000;
					color:#fff;
					align-items: center;
					display: flex;
					justify-content: center;
					font-size:48rpx;
				}
			}
			.name{
				font-size:24*2rpx;
				text-align:center;
				margin-bottom:14rpx;
			}
			.id{
				font-size:16*2rpx;
				opacity: 0.6;
				text-align: center;
			}
			.float{
				position:absolute;
				width: 65*2rpx;
				height:46*2rpx;
				border-top-left-radius: 46rpx;
				border-bottom-left-radius: 46rpx;
				right:-20*2rpx;
				top:16rpx;
				box-shadow: 0px 15px 40px 0px rgba(117, 117, 170, 0.1);
				z-index: 9;
				background: #fff;
				border: 1px solid #fff;
				.float-content{
					width:34*2rpx;
					height:34*2rpx;
					background: linear-gradient(257deg, #FFB721 0%, #69DA73 100%);
					box-shadow: 0px 20px 40px 0px rgba(62, 65, 247, 0.13), 0px 4px 8px 0px rgba(27, 28, 88, 0.2);
					left:12rpx;
					top:50%;
					margin-top:-34rpx;
					position:absolute;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					.qrcode{
						width:50%;
						height:50%;
						background-image: url('/static/mine/qrcode.png');
						background-size: 50% 50%;
						background-position: center;
					}
				}
			}
		}
		.input{
			.list{
				margin-bottom:30*2rpx;
				font-size:14px;
				.label{
					font-size:14*2rpx;
					color:rgba(255,255,255,0.5)
				}
				.input-content{
					.input-info{
						line-height:35px;
					}
				}
			}
		}
		.comfirm-btn{
			position:fixed;
			height:120rpx;
			width:336*2rpx;
			left:50%;
			margin-left:-336rpx;
			bottom:40rpx;
			background-color: #FFB721;
			color:#fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size:40rpx;
			border-radius: 14rpx;
		}
	}
</style>
